import React, { useCallback, useMemo } from "react";
import { Slate, Editable, withReact, useSlateStatic } from "slate-react";
import {
  Editor,
  Transforms,
  createEditor,
  Element as SlateElement,
} from "slate";
// import { withHistory } from 'slate-history';

const initialValue = JSON.parse(localStorage.getItem("content")) || [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];

const SelectInlineBlock = ({ attributes, children }) => {
  return (
    <div {...attributes}>
      <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      {children}
    </div>
  );
};

const InputBlock = ({ attributes, children, element }) => {
  const editor = useSlateStatic();

  const handleChange = (e) => {
    const inputValue = e.target.value;

    // 更新 input 的 value 到 Slate 编辑器中
    const path = ReactEditor.findPath(editor, element);
    Transforms.setNodes(editor, { value: inputValue }, { at: path });
  };

  return (
    <div {...attributes}>
      <input
        type="text"
        value={(element || {}).value || ''}
        onChange={handleChange}
        placeholder="Enter some text"
      />
      {children}
    </div>
  );
};

const Element = ({ attributes, children, element }) => {
  switch (element.type) {
    case "blue-block":
      return <InputBlock {...attributes}>{children}</InputBlock>;
    case "select-inline-block":
      return <SelectInlineBlock {...attributes}>{children}</SelectInlineBlock>;
    default:
      return <span {...attributes}>{children}</span>;
  }
};

const insertBlueBlock = (editor) => {
  const blueBlock = { type: "blue-block", children: [{ text: "" }] };
  Transforms.insertNodes(editor, blueBlock);
};

const insertSelectInlineBlock = (editor) => {
  const blueBlock = { type: "select-inline-block", children: [{ text: "" }] };
  Transforms.insertNodes(editor, blueBlock);
};

const RichTextExample = () => {
  const editor = useMemo(() => withReact(createEditor()), []);

  const renderElement = useCallback((props) => <Element {...props} />, []);

  return (
    <div>
      <div style={{ border: "1px solid #ccc" }}>
        <Slate
          editor={editor}
          initialValue={initialValue}
          onChange={(value) => {
            const isAstChange = editor.operations.some(
              (op) => "set_selection" !== op.type
            );
            if (isAstChange) {
              // Save the value to Local Storage.
              const content = JSON.stringify(value);
              console.log(content);
              localStorage.setItem("content", content);
            }
          }}
        >
          <Editable renderElement={renderElement} />
        </Slate>
      </div>
      <div style={{ marginTop: 20 }}>
        <button onClick={() => insertSelectInlineBlock(editor)}>
          插入select
        </button>
        <button onClick={() => insertBlueBlock(editor)}>插入文本域</button>
      </div>
    </div>
  );
};

export default RichTextExample;
